<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="contain">
        <div class="moon"></div>
    </div>
    <div class="tianliangle">
        <div class="sun"></div>
    </div>
</body>
<script>
    function rain() {
        var body_height = document.documentElement.scrollHeight;
        var body_width = document.documentElement.scrollWidth;
        let cloud = document.querySelector('.contain');
        let e = document.createElement('div');
        let left = Math.random() * body_width;
        let width = Math.random() * 5;
        let top = Math.random() * body_height;

        e.classList.add('drop');
        cloud.appendChild(e);
        e.style.left = left - 5 + 'px';
        e.style.width = 0.5 + width + 'px';
        e.style.height = 0.5 + width + 'px';
        e.style.top = top - 5 + 'px';


        setTimeout(function () {
            cloud.removeChild(e)
        }, 2000)
    }

    let wen=['I','L','O','V','E','Y','U'];

    function yun() {
        var body_height = document.documentElement.scrollHeight;
        var body_width = document.documentElement.scrollWidth;
        let cloud = document.querySelector('.tianliangle');
        let e = document.createElement('div');
        let left = Math.random() * body_width;
        let width = Math.random() * (160 - 40) + 40;
        let top = Math.random() * body_height;
        let x = Math.floor(Math.random() * 30);

        e.classList.add('dropYun');
        cloud.appendChild(e);
        e.style.left = left - 190 + 'px';
        // e.style.width = 0.5 + width + 'px';
        e.style.height = 0.5 + width + 'px';
        e.style.top = top - 160 + 'px';
        // e.style.boxShadow = `${width - x}px -${x}px 0 10px #ffffff60`;
        e.style.fontSize = 0.5 * width + 'px';
        let wenIndex=Math.floor(Math.random() * 11);
        // console.log(wenIndex);
        e.textContent=wen[wenIndex];

        setTimeout(function () {
            cloud.removeChild(e)
        }, 2000)
    }

    let clear

    let clouds = document.querySelector('.contain');
    let timer = 0;
    let timers = 0;


    setInterval(() => {
        if (timer == 0 && timers == 0) {
            clearInterval(clear)
            clear = setInterval(function () {
                rain()
            }, 20)
        } else if (timer == 1 && timers == 0) {
            clearInterval(clear)
            clear = setInterval(function () {
                yun()
            }, 100)
        }
    }, 1000)


    setInterval(() => {
        if (timer == 0) {
            timers++
            if (timers == 6) {
                timer = 1
                timers = 0
                clouds.classList.add('active')
                clouds.classList.remove('active1');
            }
        } else {
            timers++
            if (timers == 6) {
                timer = 0
                timers = 0
                clouds.classList.add('active1')
                clouds.classList.remove('active');
            }
        }
    }, 1000)
    setTimeout(() => {

    }, 6000);
</script>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .contain {
        /* background-color: rgb(39, 39, 39); */
        background: radial-gradient(ellipse at bottom, #0d1e31, #111);
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        position: fixed;
        top: 0;
        z-index: 6;
        /* display: flex;
        justify-content: center;
        align-items: center; */
    }

    .moon {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        /* background: #f8d300; */
        position: relative;
        top: 50%;
        left: 50%;
        z-index: 2;
        margin-left: 100px;
        /*设置元素圆角边框 将元素设置为一个圆形*/
        border-radius: 50%;
        /* 左偏移量，右偏移量，模糊距离，阴影颜色 */
        box-shadow: -50px 50px 0px #f8d300;
        /* 将元素背景设置为透明，遮住阴影一部分，使得阴影出现月亮形状 */
        background-color: transparent;
    }

    /* .moon::before {
        content: '';
        width: 160px;
        height: 160px;
        background: #0d1e3160;
        position: absolute;
        top: 0px;
        left: -40px;
        border-radius: 50%;
        background-size: cover;
        animation: moons 16s 0s infinite;
    } */

    @keyframes moons {

        0%,
        50% {
            width: 160px;
        }

        25%,
        75% {
            width: 0px;
        }
    }

    .moon::after {
        content: '';
        position: absolute;
        top: 140px;
        left: 0px;
        width: 110px;
        height: 110px;
        border-radius: 50%;
        background: #484f59;
        box-shadow: 90px -10px 0 30px #484f59;
        animation: anima 6s 0s infinite;
        z-index: 2;
        /* box-shadow:0 0 10px #f8d300; */
    }

    @keyframes anima {

        0%,
        50% {
            left: 0;
        }

        25%,
        75% {
            left: 110px;

        }
    }

    .drop {
        background-color: #fff;
        position: absolute;
        z-index: 1;
        border-radius: 10px;
    }

    /* 上升 */
    .active {
        transform: translateY(-100vh);
        transition: ease-in-out 2s;
        transition-delay: 1s;
    }

    .active1 {
        transform: translateY(0vh);
        transition: ease-in-out 2s;
        transition-delay: 1s;
    }

    /* 白天 */
    .tianliangle {
        background-color: #87CEEB;
        width: 100vw;
        height: 100vh;
    }

    .sun {
        background-color: rgb(251, 172, 19);
        width: 200px;
        height: 200px;
        border-radius: 50%;
        position: relative;
        top: 50%;
        left: 50%;
        z-index: 2;
    }

    .sun::before {
        content: '';
        position: absolute;
        top: 140px;
        left: 0px;
        width: 110px;
        height: 110px;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 90px -10px 0 30px #fff;
        animation: anima 6s 0s infinite;
        z-index: 2;
    }

    .dropYun {
        /* width: 110px; */
        /* height: 110px; */
        border-radius: 50%;
        /* background: #ffffff60; */
        /* box-shadow: 90px -10px 0 10px #fff; */
        position: absolute;
        z-index: 1;
        text-align: center;
        color: #ffffff60;
    }
</style>

</html>